<!-- 轨迹线 -->
<template>
  <div
    class="attribute"
    :style="'max-height:' + ($store.state.windowAttributes.height + 300) + 'px'"
  >
    <a-form-item label="动画">
      <a-radio-group
        v-model:value="selectMapComponent.layerStyle.animate"
        @change="changeAnimate"
      >
        <a-radio :value="true">开启</a-radio>
        <a-radio :value="false">关闭</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="宽度">
      <a-input-number
        :min="5"
        class="inputStyle"
        v-model:value="selectMapComponent.layerStyle.lineWidth"
      />
    </a-form-item>
    <a-form-item label="动画(ms)">
      <a-input-number
        :disabled="!selectMapComponent.layerStyle.animate"
        class="inputStyle"
        :min="0"
        :max="60000"
        :step="100"
        v-model:value="selectMapComponent.layerStyle.duration"
      />
    </a-form-item>
    <!--动画开-->
    <template v-if="selectMapComponent.layerStyle.animate">
      <a-form-item label="头部颜色">
        <a-input
          v-if="isFullscreen"
          type="color"
          v-model:value="selectMapComponent.layerStyle.headColor"
        />
        <color-picker
          v-else
          v-model:pureColor="selectMapComponent.layerStyle.headColor"
        />
      </a-form-item>
      <a-form-item label="尾部颜色">
        <a-input
          v-if="isFullscreen"
          type="color"
          v-model:value="selectMapComponent.layerStyle.trailColor"
        />
        <color-picker
          v-else
          v-model:pureColor="selectMapComponent.layerStyle.trailColor"
        />
      </a-form-item>
    </template>
    <template v-else>
      <a-form-item label="线条颜色">
        <a-input
          v-if="isFullscreen"
          class="inputStyle"
          type="color"
          v-model:value="selectMapComponent.layerStyle.headColor"
        />
        <color-picker
          v-else
          v-model:pureColor="selectMapComponent.layerStyle.headColor"
          @pureColorChange="changeLineColor"
        />
      </a-form-item>
    </template>
    <a-form-item label="间隔条数">
      <a-input-number
        class="inputStyle"
        :min="0.1"
        :max="1"
        :step="0.1"
        v-model:value="selectMapComponent.layerStyle.interval"
      />
    </a-form-item>
    <a-form-item label="海拔高度">
      <a-input-number
        class="inputStyle"
        :min="0"
        v-model:value="selectMapComponent.layerStyle.altitude"
      />
    </a-form-item>
    <!-- 增加slot -->
    <slot></slot>
  </div>
</template>

<script>
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
export default {
  props: ['selectMapComponent'],
  inject: ['getScreenStatus'],
  components: {
    MinusOutlined,
    PlusOutlined,
  },
  data() {
    return {};
  },
  computed: {
    isFullscreen() {
      return this.getScreenStatus();
    },
  },
  methods: {
    //是否开启动画
    changeAnimate(val) {
      let componentStyle = this.selectMapComponent.layerStyle;
      componentStyle.trailColor = val.target.value
        ? componentStyle.trailColor == componentStyle.headColor
          ? 'rgba(0,0,0,0)'
          : componentStyle.trailColor
        : componentStyle.headColor;
    },
    changeLineColor(e) {
      let componentStyle = this.selectMapComponent.layerStyle;
      componentStyle.headColor = componentStyle.trailColor = e;
    },
  },
};
</script>
<style lang="less" scoped>
.attribute {
  .inputStyle {
    width: 160px;
  }
  .limitInput {
    background-color: #f5f5f5;
    color: #d9d9d9;
  }
  .limitInput:hover {
    cursor: not-allowed !important;
  }
}
</style>
